<template>
    <div class="register bg-white">
       <!-- 头部 -->
       <!-- 搜索头部 -->
       <van-nav-bar
       title="注册"
       
       left-arrow
       @click-left="$router.go(-1)"
       />
        <div class="register-form px-2">
           
            <mt-field class="" placeholder="请输入手机号码" type="tel" :attr="{ maxlength: 11 }" v-model="user.username"></mt-field>
            <mt-field :disableClear="true" class="password-text border-bottom" :attr="{ maxlength: 20 }" placeholder="请设置6位数以上密码" :type="inputType" v-model="user.password">
              
              <el-button size="mini" icon="el-icon-search" circle @click="eyeMethod()"></el-button>
            </mt-field>
            
            <mt-field class="border-bottom mb-3" :disableClear="true" placeholder="短信验证码" type="number" :attr="{ maxlength: 6 }" v-model="user.code">
                <el-button size="mini" class="get-ver" :class="checkPhone()" @click="getCode()">获取验证码{{backNum==0?'':backNum}}</el-button>
            </mt-field>
            <div class="btn-row d-flex jc-around pt-3">
                <el-button type="danger" :class="checkAll()" @click="submit()">注册</el-button>
            </div>
            <div class="notice fs-md py-3 px-3">
              注册即视您同意
              <router-link to="/clause">《校园快药服务条款》</router-link>
            </div>
        </div>
    </div>
</template>
<script>
import { Checklist, Field, Toast } from "mint-ui";
const checkPhoneReg = /^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/;
export default {
  name: "register",
  data() {
    return {
      user:{
        username: "",
        code: "",//用户输入的验证码
        password: "",
      },
      
      openEye: false,
      eyeClass: "eye-close",
      inputType: "password",
      checkPass: false,
      agree: ["1"],
      optionsList: [
        {
          label: "同意药居士网上药店注册协议",
          value: "1"
        }
      ],
      validateCode: "",//获取到的验证码
      canSubmit: false,
      backNum: 0,
    };
  },
  components: {
    mtChecklist: Checklist,
    mtField: Field
  },
  methods: {
    eyeMethod() {
      this.openEye = !this.openEye;
      if (this.openEye) {
        this.eyeClass = "eye-open";
        this.inputType = "text";
      } else {
        this.eyeClass = "eye-close";
        this.inputType = "password";
      }
    },
    checkPassWord() {
      if (this.user.password.length > 5 && this.user.password.length < 21) {
        return true;
      }
      return false;
    },
    checkPhone() {
      if (
        !checkPhoneReg.test(this.username) ||
        this.backNum > 0 ||
        !this.checkPassWord()
      ) {
        this.checkPass = false;
        return "disabled";
      } else {
        this.checkPass = true;
        return "ok";
      }
    },
    checkAll() {
      if (
        this.user.username != "" &&
        this.user.password != "" &&
        this.user.code != ""
      ) {
        this.canSubmit = true;
        return "ok";
      }
      this.canSubmit = false;
      return "disabled";
    },
    async getCode() {
      
      if (!this.checkPassWord()) {
        Toast("请求填写6到20位密码");
      }
      if (this.backNum == 0) {
        // 发起请求
        const res = await this.$http.get(`login/sendSms.do?phone=${this.user.username}&type=register`);
          console.log(res)
          if (res.status != 0) {
            
            //获取到的验证码
            this.user.code = res.data;
            this.backNum = 60;
            let inter = setInterval(() => {
              this.backNum--;
              if (this.backNum == 0) {
                this.backNum = 0;
                clearInterval(inter);
              }
            }, 1000);

          } else {
            Toast(res.data.message);
          }
        
      }
    },
    async submit() {
      if (this.canSubmit) {

        if (this.user.password.length < 6) {
          Toast("请设置6位数以上密码");
          return;
        }
        const res = await this.$http.post('login/register.do',this.user);
        if (res.data.code != 0) {
          this.$router.push('/login')  
              Toast("注册成功");
        }else {
          Toast(res.data.message);
        }
        
      }else {
        Toast('请输入相关信息');
      }
    }
  },
  created() {

  }
};
</script>

<style scoped lang='scss'>
.el-button {
  width: 98%;
}
.title {
  margin: 15px auto;
}
</style>